<template>
  <page-layout :avatar="currUser.avatar">
    <div slot="headerContent">
      <div class="title">你好，{{ companyUser.company_username }}，今天天气不错。</div>
      <div>{{ company.company_name }}申报人</div>
    </div>
    <template slot="extra">
      <head-info class="split-right" :title="$t('project')" :content="projectList.length"/>
      <head-info class="split-right" title="所在公司" :content="company.company_name"/>
    </template>
    <template>
      <a-row style="margin: 0 -12px">
        <a-col style="padding: 0 12px" :xl="16" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card class="project-list" :loading="loading" style="margin-bottom: 24px;" :bordered="false"
                  :title="$t('progress')" :body-style="{padding: 0}">
            <div>
              <a-card-grid :key="i" v-for="(item, i) in projectList">
                <a-card :bordered="false" :body-style="{padding: 0}" @click="goProjectInfo(item)">
                  <a-card-meta :description="item.project_tip">
                    <div slot="title" class="card-title">
                      <a-avatar size="small" src="https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png"/>
                      <span>{{ item.project_name }}</span>
                    </div>
                  </a-card-meta>
                  <div class="project-item">
                    <a class="group" href="/#/">{{ company.company_name }}</a>
                    <span class="datetime">{{ item.project_time }}</span>
                  </div>
                </a-card>
              </a-card-grid>
            </div>
          </a-card>
          <a-card :loading="loading" :title="$t('dynamic')" :bordered="false">
            <a-list>
              <a-list-item :key="index" v-for="(item, index) in activities">
                <a-list-item-meta>
                  <a-avatar slot="avatar" :src="item.user.avatar"/>
                  <div slot="title" v-html="item.template"/>
                  <div slot="description">9小时前</div>
                </a-list-item-meta>
              </a-list-item>
            </a-list>
          </a-card>
        </a-col>
        <a-col style="padding: 0 12px" :xl="8" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card :title="$t('access')" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
            <div class="item-group">
              <a-button size="small" type="primary" ghost icon="form" @click="goAddProject">新建项目</a-button>
              <a-divider type="vertical" />
              <a-button size="small" type="primary" ghost icon="trophy" @click="goAwardWinning">奖项查询</a-button>
            </div>
          </a-card>
          <a-card :loading="loading" :title="`XX ${$t('degree')}`" style="margin-bottom: 24px" :bordered="false"
                  :body-style="{padding: 0}">
            <div style="min-height: 400px;">
              <radar/>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </template>
  </page-layout>
</template>

<script>
import PageLayout from '@/layouts/PageLayout'
import HeadInfo from '@/components/tool/HeadInfo'
import Radar from '@/components/chart/Radar'
import {mapState} from 'vuex'
import Axios from 'axios'
//import {request, METHOD} from '@/utils/request'

export default {
  name: 'declarantWorkPlace',
  //Radar
  components: {Radar, HeadInfo, PageLayout},
  i18n: require('./i18n'),
  data() {
    return {
      url: this.$store.state.apiUrl + ':' + this.$store.state.apiPort,
      projects: [],
      loading: true,
      activities: [],
      teams: [],
      welcome: {
        timeFix: '',
        message: ''
      },
      company: {},
      // 企业负责人
      companyUser: this.$store.state.declartant,
      // 项目列表
      projectList: []
    }
  },
  computed: {
    ...mapState('account', {currUser: 'user'}),
    ...mapState('setting', ['lang'])
  },
  created() {
    this.projects.push(
        {
          i: 0,
          title: "XX项目",
          desc: "简要介绍简要介绍简要介绍简要介绍简要介绍简要介绍",
          logo: "https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png",
          path: "/list/application-items",
          time: "2021/6/30"
        }, {
          i: 1,
          title: "XX项目",
          desc: "简要介绍",
          logo: "https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png",
          path: "/list/application-items",
          time: "2021/6/30"
        }
    )
    this.loading = false
  },
  methods: {
    TestCon(path) {
      console.log(path)
      // this.$router.go(-1)
      this.$router.push({path: path});
    },
    // project属性对不上，占位用的 跳转项目详情页
    goProjectInfo(item) {
      this.$router.push({
        name: '申报项目详情',
        params: {
          project: item,
        }
      })
    },
    // 跳转添加项目页
    goAddProject() {
      this.$router.push({
        name: '添加申报项目',
        params: {
          company_id: this.company.company_id,
          company_user_id: this.companyUser.company_user_id
        }
      })
    },
    // 跳转奖项列表
    goAwardWinning() {
      this.$router.push({
        name: '获奖名单',
      })
    },
    // 根据公司申报人获取公司信息
    getCompany() {
      Axios.post(this.url + '/pxManagerSystem/getCompanyInfoByCompanyUserId', {
        company_user_id: this.companyUser.company_user_id
      }).then(res => {
        console.log(res.data)
        this.company = res.data.data.companyInfoList[0]
      }).catch(err => {
        console.log(err)
      })
    },
    // 根据申报人id获取项目信息
    getProjectList() {
      Axios.post(this.url + '/pxManagerSystem/getProjectByCompanyUserId', {
        company_user_id: this.companyUser.company_user_id
      }).then(res => {
        console.log(res.data)
        this.projectList = res.data.data.projectInfolist
      }).catch(err => {
        console.log(err)
      })
    }
  },
  mounted() {
    this.getCompany()
    this.getProjectList()
  }

}
</script>

<style lang="less">
@import "index";
</style>
